<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <svg class="box">

        <!-- 绘制直线 -->
        <!-- <line x1="100" y1="100" x2="200" y2="200" style="stroke:red;stroke-width: 10;"></line> -->
        <!-- 多点实现多边形 -->
        <!-- <polyline points="20 40,100 80, 30 190,500 60" style="fill: cyan;"></polyline> -->
        <!-- 矩形 -->
        <!-- <rect x="50" y="300" width="100" height="100" style="fill: skyblue;"></rect> -->
        <!-- 圆 -->
        <!-- <circle cx='70' cy='95' r='50' style='stroke:black; fill:red'></circle> -->

        <!-- <ellipse cx="200" cy="200" rx="100" ry="50" style="fill:black;"></ellipse> -->

        <!-- 通过多个点绘制图形 -->
        <path  style="fill:red" d="
  M 100 100 
  L 200 34
  L 123 66
  L 400 124
  L 100 24
  L 300 44
  Z
"></path>



    </svg>



    <svg t="1655518748632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1581" width="200" height="200"><path d="M950.8 487.1c-33-48.7-202.8-291.7-295.3-291.7-35 0-66.4 27.9-96.7 55-14.6 13-39.1 34.8-47.9 34.8-10 0-36-22.8-51.6-36.5-29.6-25.9-60.1-52.7-92.4-52.7h-0.6C273.9 197.1 104.1 438.6 71 487c-5.1 7.5-5.8 17.2-1.8 25.4 1.6 3.3 39.9 80.7 112.7 158.9 97.9 105.2 211.7 160.8 329 160.8 55.6 0 110.4-12.3 162.8-36.5 12.5-5.8 18.1-20.7 12.3-33.3-5.8-12.6-20.6-18.1-33.1-12.4-45.9 21.2-93.7 31.9-142.1 31.9-220 0-358.5-222.6-390.1-278.9 87.5-125.4 203.5-256.1 245.9-256.6h0.1c13.6 0 40.2 23.3 59.6 40.3 28.6 25.1 55.7 48.8 84.4 48.8 27.7 0 53.5-23 81-47.4 21.2-18.9 47.6-42.4 63.7-42.4 42.3 0 158.2 131.2 245.5 257.2-16.5 29.6-62.4 105.3-134 170.1-10.3 9.3-11.1 25.2-1.9 35.5s25 11.2 35.2 1.9c98.2-88.9 150.1-193.6 152.2-198 4.2-8 3.5-17.7-1.6-25.2z m-158 37c5.7-12.7 0.1-27.5-12.5-33.3-0.3-0.1-25.4-11.6-43.2-21.7-74.6-42.3-130-19.3-170.5-2.5-17.9 7.4-33.3 13.8-46.8 13.8-14.1 0-26.9-6.4-43.2-14.4-35.8-17.8-85-42.1-170.5 3-18.1 9.6-45.9 21.3-46.2 21.4-12.7 5.4-18.7 20.1-13.4 32.9 4 9.6 13.3 15.4 23 15.4 3.2 0 6.5-0.6 9.6-1.9 1.2-0.5 30.1-12.7 50.1-23.3 63-33.3 91.9-19 125.3-2.4 19.5 9.6 39.6 19.6 65.2 19.6 23.5 0 45-9 65.9-17.6 37.8-15.7 73.4-30.5 126.9-0.2 19.7 11.1 46 23.1 47.1 23.7 12.9 5.8 27.6 0.2 33.2-12.5z" fill="#EF6D64" p-id="1582"></path></svg>



    <svg t="1655519654345" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1736" width="200" height="200"><path d="M231.68 554.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#FF9B57" p-id="1737"></path><path d="M512 525.226667a197.546667 197.546667 0 0 1-197.333333-197.333334 42.666667 42.666667 0 0 1 85.333333 0 112 112 0 1 0 224 0 42.666667 42.666667 0 0 1 85.333333 0A197.546667 197.546667 0 0 1 512 525.226667z" fill="#FD8F9E" p-id="1738"></path><path d="M666.666667 374.4a42.666667 42.666667 0 0 1-42.666667-42.666667 112 112 0 1 0-224 0 42.666667 42.666667 0 1 1-85.333333 0 197.333333 197.333333 0 1 1 394.666666 0 42.666667 42.666667 0 0 1-42.666666 42.666667z" fill="#FC455D" p-id="1739"></path><path d="M737.706667 445.44a113.92 113.92 0 0 1-113.706667-113.706667 42.666667 42.666667 0 0 1 85.333333 0 28.373333 28.373333 0 0 0 56.746667 0 42.666667 42.666667 0 1 1 85.333333 0 113.92 113.92 0 0 1-113.706666 113.706667zM286.293333 445.44a113.92 113.92 0 0 1-113.706666-113.706667 42.666667 42.666667 0 1 1 85.333333 0 28.373333 28.373333 0 1 0 56.746667 0 42.666667 42.666667 0 0 1 85.333333 0 113.92 113.92 0 0 1-113.706667 113.706667z" fill="#FC455D" p-id="1740"></path><path d="M737.706667 857.6a42.666667 42.666667 0 0 1-42.666667-42.666667A186.666667 186.666667 0 0 0 512 625.493333a186.666667 186.666667 0 0 0-183.04 189.44 42.666667 42.666667 0 0 1-85.333333 0A272 272 0 0 1 512 540.16 272 272 0 0 1 780.373333 814.933333a42.666667 42.666667 0 0 1-42.666666 42.666667z" fill="#FD8F9E" p-id="1741"></path></svg>
</body>

</html>